<template>
    <div>
        <h2>{{title}}</h2>
        total:<small>$:</small>{{totalPrice}}
    </div>
</template>

<script>
    export default {
        name: "App",
        data() {
            return {
                name: "xzc",
                slogen: "best best best",
                books: [
                    {id: 1, name: 'xxx1', price: 79},
                    {id: 2, name: 'xxx2', price: 108},
                    {id: 3, name: 'xxx3', price: 138},
                    {id: 4, name: 'xxx4', price: 158},
                ]
            }
        },
        computed: {
            title: {
                set(values) {
                    let arr = values.split(',');
                    this.name = arr[0];
                    this.slogen = arr[1];
                },
                //有缓存作用，只要下面的值没变化
                get() {
                    return this.name + ' # ' + this.slogen;
                }
            },
            totalPrice: {
                get() {
                    return this.books.reduce((s, x) =>
                        s + x.price, 0
                    )
                }
            }
        },
        methods: {}
    }
</script>

<style scoped>

</style>